<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户注册</title>
	<link rel="stylesheet" type="text/css" href="../css/login.css">
	
</head>
<body>
	<div class="regist">
		<div class="regist_center">
			<div class="regist_top">
				<div class="left fl">会员注册</div>
				<div class="right fr"><a href="../index.html" target="_self">回到首页</a></div>
				<div class="right fr"><a href="./login.html" target="_self">去登录</a></div>
				<div class="clear"></div>
				<div class="xian center"></div>
			</div>
			<div class="regist_main center">
				<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang" type="text" id="userName" name="username" placeholder="请输入你的用户名[至少6位]"/><span id="message" style="font-size:18px"></span></div>
				<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="shurukuang" type="password" id="mm1" name="password" placeholder="请输入你的密码[6-8位]"/></div>
				
				<!-- <div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码" id="mm2"/><span id="msg" style="font-size:18px"></span></div> -->
				<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" id="tel" type="text" name="phone" placeholder="请填写正确的手机号"/></div>
				<div class="username">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;<input class="shurukuang" id="mail" type="text" name="mail" placeholder="请填写邮箱地址"/><span id="result" style="font-size:18px"></span></div>
				<div class="regist_submit">
					<input class="submit" type="button" name="submit" value="立即注册" >
				</div>	
				<span class="msg"></span>
			</div>					
		</div>
	</div>
</body>
	<script src="../js/ajax-promise.js"></script>

	<script>
		class Register{
			constructor(){
				this.user = document.getElementById("userName");
				this.pass = document.getElementById("mm1");
				// this.tpass = document.getElementById("mm2");
				this.tel = document.getElementById("tel");
				this.email = document.getElementById("mail");
				this.submit = document.querySelector(".submit");
				this.msg = document.querySelector(".msg");

            // 提前准备接口
				this.url = "http://api.icodeilife.cn:81/user";

				this.addEvent()
			}


			addEvent(){
				var that = this;
				this.submit.onclick = function(){
                // 注册请求之前获取输入框内容
					that.u = that.user.value;
					that.p = that.pass.value;
					// that.tp = that.tpass.value;
					that.t = that.tel.value;
					that.e = that.email.value;
					that.load();   //开启ajax请求
				}
			}
			load(){
				ajax({
					url:this.url,
					data:{      // 根据接口文档，发送数据
						type: "register",
						user: this.u,
						pass: this.p,
						// tpass:this.tp,
						tel: this.t,
						email: this.e
                	}
				}).then((res)=>{
					// 请求成功后，查看数据，处理数据
					// console.log(1)
					// console.log(res);
					this.res = JSON.parse(res);
					// 渲染结果
					this.display();
				})
			}
			display(){
            // 根据成功或失败，决定后续操作
				if(this.res.code == 1){
					this.msg.innerHTML = this.res.msg + "，3秒后到登录页面";
					setTimeout(()=>{
						location.href = "login.html";
					},3000);
				}else{
					this.msg.innerHTML = this.res.msg;
				}
       	 	}
		}

		new Register;

	</script>


		<!-- <script type="text/javascript">
		    function validateMail(){
		         var mail= $("#mail").val();
		         var regex= /^\w+@\w+.\w+$/;
		         if(mail.match(regex)){
		            $("#result").text("此邮箱格式正确");
		            return true;
		         }else{
		            $("#result").text("此邮箱格式错误");
		            return false;
		         }
		    }
		
		    function validateMm(){
		       var v1= $("#mm1").val();
		       var v2= $("#mm2").val();
		        
		        if(v1!='' && v1==v2){
		            
		            return true;
		        }else{
		           $("#msg").text("两次密码不一致，请检查");
		           $("#msg").css("color","red");
		           return false;
		        }
		    }
		    
		    var result = true;
		    function validateName(){
		         var name = $("#userName").val();
		          if(name!=''){
		             $.get("../user/validateName?name="+name,function(data){
				        // alert(data);
				         if(data=="0"){
				            $("#message").text("该用户名可以用");
				            $("#message").css("color","green");
				            result = true;
				         }else{
				            $("#message").text("该用户名已经被占用");
				            $("#message").css("color","red");
				            result = false;
				         }
				     });
		          }else{
		             result = false;
		             $("#message").text("该用户名不能为空");
				     $("#message").css("color","red");
		          }
				     
		    }
		
			$(function(){
				
				$("#userName").blur(function(){
				      validateName();
				});
				
			});
			
			function validateForm(){
				    //alert("1");
				    //alert($("#form"));
				    $("#form").submit(function(){
				        //alert("2");
				        if(validateMm() && result && validateMail()){
					      //此表单都正确，可以提交给服务器
					      //alert("3");
						   return true;
						   
					    }else{
					       //alert("4");
					       return false;
					    }
				    
				    });
			}
		</script> -->

</html>